import { defineComponent, reactive, UnwrapRef } from "vue";
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
import { ValidateErrorEntity } from 'ant-design-vue/es/form/interface';
import { Form } from "ant-design-vue";
import './login.less';
import { useThrottleFn } from "@vueuse/core";
import { useStore } from "vuex";

interface FormState {
  user: string;
  password: string;
}
const useForm = Form.useForm;
export default defineComponent({
  components: {
    UserOutlined,
    LockOutlined,
  },
  setup() {
    const store = useStore();
    const form = {
      models: reactive({
        user_name: undefined,
        password: undefined
      }),
      rules: reactive({
        user_name: [
          {
            required: true,
            min: 2,
            max: 15,
            type: "string",
            message: "用户名长度为2-15位",
          },
        ],
        password: [
          {
            required: true,
            min: 3,
            max: 15,
            message: "密码长度为3-15位",
            type: "string",
          },
        ],
      }),
      onSubmit: (e: { preventDefault: () => void }) => {
        e.preventDefault();
        validate().then((res: any) => {
          form.doRequest(res)
        })
          .catch((err) => {
            console.log(err);
          });
      },
      doRequest: useThrottleFn(
        (data) => store.dispatch("auth/loginAction", data),
        1000,
        false
      ),

    }
    const handleFinish = (values: FormState) => {
      console.log(values, form);
    };
    const handleFinishFailed = (errors: ValidateErrorEntity<FormState>) => {
      console.log(errors);
    };
    const { validate, validateInfos } = useForm(form.models, form.rules);
    return () => (
      <>
        <div id="login">
          <div class="Login_window">
          <a-form layout="horizontal" model={[form.models,"value"]} onFinish={form.onSubmit} onFinishFailed={handleFinishFailed}>
            <a-form-item {...validateInfos["username"]} >
              <div class="w-full flex flex-row flex-nowrap border-tc">
                <div class="text-tc w-36 text-xl">你的账号:</div>
                <a-input v-model={[form.models.user_name, "value"]} placeholder="Username" v-slots={{
                  prefix: () => (<UserOutlined style="color: rgba(0, 0, 0, 0.25)" />)}}>
               </a-input>
              </div>
            </a-form-item>
            <a-form-item {...validateInfos["password"]} >
            <div class="w-full flex flex-row flex-nowrap border-tc mt-6">
              <div class="text-tc w-36 text-xl">你的密码:</div> 
              <a-input v-model={[form.models.password, "value"]} type="password" placeholder="Password" v-slots={{
                prefix: () => (<LockOutlined style="color: rgba(0, 0, 0, 0.25)" />)}}>
              </a-input>
            </div>
            </a-form-item>
            <a-form-item>
              <div class="text-center">
                <a-button type="primary" class="w-28 mt-6" html-type="submit" onClick={form.onSubmit}>
                  登陆
                </a-button>
              </div>
            </a-form-item>
          </a-form>
          </div>
        </div>
      </>
    );
  },
});
